<template>
<el-dialog v-model="dialog[0].show" :title="dialog[0].title">
            <el-form :model="dialog[0].data">
                <el-form-item v-for="(item, index) in dialog[0].data" :key="index" :label="item.name" :label-width="formLabelWidth"  v-show="!item.hide" >
                    <el-input :placeholder="item.placeholder" :disabled="item.disabled" v-model="item.value" autocomplete="off" />
                 <!-- {{item.value}} -->
                 </el-form-item>
            </el-form>
            <el-form-item v-for="(item, index) in dialog" :key="index">
                <template v-slot="{ row,$index,column }">
                    <slot
                    v-if="item.slot"
                    :name="item.slot"
                    :row="row"
                    :index="$index"
                    :column="column"
                    >
                    </slot>
                </template>
            </el-form-item>
</el-dialog>
</template> 
<script setup>
import { defineProps,defineEmits,ref } from 'vue'

const props = defineProps({
    dialog:{
        required: true,
        type:Array,
        default: () => []

    },
    form:Object,
    form1:Object,
    form2:Object,
    roles:Array,
})
const emit = defineEmits(['esc','add','changed','selectRole']);

const role = ref('');

const esc = ()=>{
    emit('esc');
}

const add = ()=>{
    emit('add')
}
const changed = ()=>{
    emit('changed')
}
const selectRole = ()=>{
    emit('selectRole',props.form2.id,role.value.id)
}

</script>
<style lang="scss" scoped>
    
</style>